import './App.css';
import React from 'react';
import Toolbar from "./Toolbar";
import { Button, Toast, List, Icon, WhiteSpace, Modal, Card } from 'antd-mobile';
import * as request from './request';
import Header from "./Header";
import { connect } from 'react-redux';
import moment from 'moment';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import ico_quxian from './static/ico_quxian.svg';
import ico_naiping from './static/ico_naiping.svg';
import ico_bianb from './static/ico_bianb.svg';
import ico_event from './static/ico_event.svg';

const apiURL = "/api/services/app/Edu_EventChild/GetAllInfo";
const Item = List.Item;
const Brief = Item.Brief;
const myImg = function (btype) {
    if (btype === '1')
        return <img src={ico_event} style={{ width: 16, height: 16 }} />
    else if (btype === '2')
        return <img src={ico_quxian} style={{ width: 18, height: 18 }} />
    else if (btype === '3')
        return <img src={ico_bianb} style={{ width: 16, height: 16 }} />
    else if (btype === '4')
        return <img src={ico_naiping} style={{ width: 16, height: 16 }} />
    else
        return <img src={ico_event} style={{ width: 16, height: 16 }} />
}
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            childData: [],
            calendarData: [
                { title: '牛痘疫苗接种', date: '2021-03-10' },
                { title: '成长学习第一步', date: '2021-03-10' },
                { title: '宝宝会说话了', date: '2021-03-02' },
                { title: '宝宝发烧了', date: '2021-03-12' },
                { title: '成长学习第二步', date: '2021-03-12' },
                { title: '宝宝喂奶36分钟/次', date: '2021-03-13' },
                { title: '宝宝拉的粑粑颜色有点黄', date: '2021-03-13' },
            ],
        }
    }
    componentDidMount() {
        this.fetchData();
    }
    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }
    handleDateClick = (arg) => {
        console.log(arg.dateStr)
    }
    handleEventClick = (event, element) => {
        console.log(event, element)
        this.setState({ modal: true, eventCon: event.event._def.title })
    }
    handleClick = (btype) => {
        if (btype === '2') {
            this.props.history.push('/RecGrowth/0')
        }
    }
    fetchData = () => {
        const { currentChild } = this.props;
        console.log();
        var cid = this.props.match.params.childid;
        if (!cid && currentChild) {
            cid = currentChild.id
        }
        this.getBabyData(cid)
    }
    getBabyData = (cid) => {
        if (cid) {
            request.get(apiURL + "?childId=" + cid).then((data) => {
                if (data) {
                    var items = []
                    var arr = data.result
                    arr.forEach(element => {
                        var obj = {
                            start: element.date,
                            end: element.date,
                            title: element.title + '：' + element.contents
                        }
                        items.push(obj);
                    });
                    this.setState({ calendarData: items, childData: data.result, })
                }
            });
        }
    }
    selectBaby = (babyData) => {
        this.setState({ babyData })
        this.getBabyData(babyData.id)
    }
    render() {
        const { childData, calendarData } = this.state
        return (
            <div>
                <Header state={this.props} selectBaby={this.selectBaby} />

                <Card style={{ marginBottom: 100 }}>
                    <Card.Body>
                        <FullCalendar
                            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                            initialView="dayGridMonth"
                            headerToolbar={{
                                left: 'prev,next today',
                                center: '',
                                right: 'dayGridMonth,timeGridWeek,timeGridDay'
                            }}
                            locale='zh-cn'
                            buttonText={{
                                today: '今天',
                                month: '月',
                                week: '周',
                                day: '天'
                            }}
                            allDayText='全天'
                            height={380}
                            events={calendarData}
                            eventLimit={true}
                            dateClick={this.handleDateClick}
                            eventClick={this.handleEventClick}
                        />
                        <List renderHeader={() => '宝宝成长记录'} className="my-list">
                            {
                                childData.map((i, index) => {
                                    return (
                                        <Item
                                            multipleLine
                                            onClick={() => { this.handleClick(i.ctype) }}
                                            platform="android"
                                            key={index}
                                            wrap
                                            arrow="horizontal"
                                        >
                                            {myImg(i.ctype)} {moment(i.date).format("YYYY-MM-DD")}
                                            <div style={{ fontSize: '1rem', color: '#999' }}> {i.contents}</div>
                                            <Brief>{i.title}</Brief>
                                        </Item>
                                    )
                                })
                            }
                        </List>
                    </Card.Body>
                </Card>
                <Modal
                    visible={this.state.modal}
                    transparent
                    maskClosable={false}
                    onClose={() => this.setState({ modal2: false })}
                    title="成长事件"
                    footer={[{ text: '确定', onPress: () => { this.setState({ modal: false }); } }]}
                    wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                >
                    {this.state.eventCon}
                </Modal>
                <Toolbar history={this.props.history} selectedTab='ChildDtl' />
            </div>
        )
    };
}
export default connect(
    state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(App)
